<template>
  <div id="addOrganizational">
    <div class="homeTitle">添加组织架构信息</div>
    <div class="tablelist">
      <table class="lastTable">
        <tr>
          <td class="tdLeft">
            <span class="bitian">*</span>地市
          </td>
          <td>
            <el-select v-model="city" placeholder="请选择" size="small" @change="cityChange">
                <el-option
                v-for="ele in cityOption"
                :key="ele.name"
                :label="ele.name"
                :value="ele.name"
              ></el-option>
              </el-select>
          </td>
        </tr>
        <tr>
          <td class="tdLeft">
            <span class="bitian">*</span>机构\行社
          </td>
          <td>
            <el-select v-model="bank" placeholder="请选择" size="small">
                <el-option
                v-for="ele in bankOption"
                :key="ele.name"
                :label="ele.name"
                :value="ele.name"
              ></el-option>
              </el-select>
          </td>
        </tr>
        <tr>
          <td class="tdLeft">
            <span class="bitian">*</span>部门
          </td>
          <td>
            <el-input v-model="bumen" placeholder="请输入" size="small"></el-input>
          </td>
        </tr>
        <tr>
          <td class="tdLeft">
            子部门
          </td>
          <td>
            <el-input v-model="zibumen" placeholder="请输入" size="small"></el-input>
          </td>
        </tr>
      </table>
    </div>
    <div class="btn">
      <el-button type="primary" size="small" @click="submit">提交</el-button>
      <el-button type="primary" size="small" @click="cancel">关闭</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "addOrganizational",
  data() {
    return {
      city: '',
      cityOption: '',
      bank: '',
      bankOption: '',
      bumen: '',
      zibumen: ''
    };
  },
  mounted () {
    this.getCity();
  },
  methods: {
    submit() {
      if (!this.bankOption) {
        this.$message({message: '请您填写完整',type: 'warning'});
        return false;
      }
      let parent = this.bankOption.find((ele)=> {
        return ele.name == this.bank;
      });
      let obj= {
        fo: {
          type: '部门',
          name: this.bumen,
          parentId: parent.id,
          parentName: parent.name
        },
        co: { 
          type: '子部门',
          name: this.zibumen
        }
      };
      let status = true;
      for (let k in obj.fo) {
        if (!obj.fo[k]) {
          status = false;
        }
      }
      if (!status) {
         this.$message({message: '请您填写完整',type: 'warning'});
      } else {
        this.axios.post('organizationalChart/add',obj)
          .then(({data})=> {
            if (data.code == 200) {
              this.$message({message: '提交成功',type: 'success'});
              this.$router.go(-1);
            }
          })
      }
    },
    cancel() {
      this.$router.go(-1);
    },
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
    },
     // 地市查询
    getCity() {
      this.axios.get('organizationalChart/findAllCities')
      .then(({data}) => {
          this.cityOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 地市改变 
    cityChange() {
     let obj = this.cityOption.find((ele)=> {
        return ele.name == this.city;
      });
      this.bank = '';
      this.bumen = '';
      this.keshi = '';
      this.axios.get('organizationalChart/selectBank', {params: {id: obj.id}})
        .then(({data}) => {
          this.bankOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  }
};
</script>

<style lang="scss">
#addOrganizational {
  .tablelist {
    margin-top: 30px;
    table {
      border: 1px solid white;
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 50px;
      tr {
        td {
          text-align: center;
          padding: 10px 10px;
          border-right: 1px solid white;
          border-bottom: 1px solid white;
          .el-input__inner{
            background: transparent;
            color: white;
            border:0;
          }
          &:first-child {
             background: rgba(53, 58, 58, 0.9);
            color: white;
            width: 30%;
            .bitian {
              color: red;
            }
          }
          &:last-child {
             background: rgba(53, 58, 58, 0.55);
            color: white;
            text-align: left;
          }
          .el-select {
            width: 100%;
          }
          &.fourS {
            // display: flex;
            // justify-content: space-between;
            .el-select {
              width: 18%;
            }
          }
          .el-tag {
            background: white;
            margin-right: 20px;
            margin-bottom: 10px;
            .el-icon-close {
              background-color: red;
              color: white;
            }
          }
        }
      }
    }
    .lastTable {
      margin-bottom: 0px;
      .tdLeft {
        width: 30%;
      }
      td {
        width: 70%;
         &.fourS {
          .el-select {
            width: 18%;
          }
          .el-button {
            // margin-left: 25px;
          }
        }
      }

    }
    tr {
      td {
        text-align: center;
        padding: 5px 10px;
        border-right: 1px solid white;
        border-bottom: 1px solid white;
        &:first-child {
          background: #343839;
          color: white;
          width: 30%;
          .bitian {
            color: red;
          }
        }
        &:last-child {
          background: #7a7a73;
          color: white;
          text-align: left;
        }
        .el-select {
          width: 100%;
        }
      }
    }
  }
  .btn {
    text-align: center;
    margin-top: 20px;
  }
}
</style>
